<template>
  <div class="scrollable-content">
<!-- 公告滚动条（顶部） -->
<div class="notice-bar-wrapper">
  <div class="notice-bar">
    <el-icon class="notice-icon"><Bell /></el-icon>
    <!-- 固定部分 -->
    <span class="notice-item fixed-item">
      <el-icon :is="activities[0].icon" class="notice-item-icon" />
      <span>{{ activities[0].content }}</span>
    </span>
    <div class="notice-content">
      <div
        class="notice-list-horizontal"
        :style="noticeListStyle"
        @mouseenter="pauseNotice = true"
        @mouseleave="pauseNotice = false"
        :class="{ paused: pauseNotice }"
        ref="noticeTrack"
      >
        <span
          v-for="(activity, idx) in loopedActivities"
          :key="idx"
          class="notice-item"
        >
          <el-icon :is="activity.icon" class="notice-item-icon" />
          <span>{{ activity.content }}</span>
        </span>
      </div>
    </div>
  </div>
</div>

    <div class="stat-cards">
      <template v-for="stat in stats" :key="stat.title">
        <div class="stat-card">
          <div class="title">{{ stat.title }}</div>
          <div class="value" @mouseenter="handleCommentMouseEnter(stat)" @mouseleave="handleCommentMouseLeave">
            {{ stat.value }}
          </div>
          <div class="info">
            <span>{{ stat.info }}</span>
            <div class="trend" :style="{ color: stat.trendColor }">
              {{ stat.trend }}
            </div>
          </div>

        </div>
      </template>
    </div>

    <div class="content-card">
      <div class="dashboard-grid2">
        <!-- 访问统计总览 + 用户访问明细并排 -->
        <div class="overview-table-row">
          <!-- 总览卡片 -->
          <div class="stats-overview-card">
            <div class="overview-header">
              <div class="header-icon">
                <el-icon size="24"><DataAnalysis /></el-icon>
              </div>
              <div class="header-content">
                <h3>访问统计总览</h3>
                <p>实时用户访问数据分析</p>
              </div>
            </div>
            <div class="overview-metrics">
              <div class="metric-item">
                <div class="metric-icon total-visits">
                  <el-icon><TrendCharts /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-value">{{ totalVisitCount.toLocaleString() }}</div>
                  <div class="metric-label">总访问次数</div>
                </div>
              </div>
              <div class="metric-item">
                <div class="metric-icon total-users">
                  <el-icon><User /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-value">{{ userVisitCounts.length }}</div>
                  <div class="metric-label">总用户数</div>
                </div>
              </div>
              <div class="metric-item">
                <div class="metric-icon avg-visits">
                  <el-icon><DataBoard /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-value">{{ averageVisits }}</div>
                  <div class="metric-label">平均访问次数</div>
                </div>
              </div>
              <div class="metric-item">
                <div class="metric-icon active-users">
                  <el-icon><Top /></el-icon>
                </div>
                <div class="metric-content">
                  <div class="metric-value">{{ activeUsers }}</div>
                  <div class="metric-label">活跃用户</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 用户访问表格 -->
          <div class="stats-table-card">
            <div class="card-header">
              <div class="header-left">
                <el-icon><List /></el-icon>
                <span class="card-title">用户访问明细</span>
              </div>
              <div class="header-right">
                <el-tag type="info" size="small">共 {{ userVisitCounts.length }} 位用户</el-tag>
              </div>
            </div>
            <div class="table-wrapper">
              <el-table 
                :data="paginatedUserData" 
                style="width: 100%;" 
                size="default"
                :row-class-name="getRowClassName"
                @row-click="handleRowClick"
              >
                <el-table-column prop="rank" label="排名" width="80" align="center">
                  <template #default="{ row }">
                    <div class="rank-badge" :class="getRankClass(row.rank)">
                      {{ row.rank }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="loginId" label="登录ID" min-width="120">
                  <template #default="{ row }">
                    <div class="user-info">
                      <el-avatar :size="32" class="user-avatar">
                        {{ row.loginId.charAt(0).toUpperCase() }}
                      </el-avatar>
                      <span class="login-id">{{ row.loginId }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名" min-width="120">
                  <template #default="{ row }">
                    <span class="user-name">{{ row.userName || '未设置' }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="cnt" label="访问次数" width="120" align="center">
                  <template #default="{ row }">
                    <div class="visit-count">
                      <el-progress 
                        :percentage="getVisitPercentage(row.cnt)" 
                        :show-text="false"
                        :stroke-width="4"
                        class="visit-progress"
                      />
                      <span class="count-number">{{ row.cnt }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="活跃度" width="100" align="center">
                  <template #default="{ row }">
                    <el-tag 
                      :type="getActivityLevel(row.cnt).type" 
                      size="small"
                      class="activity-tag"
                    >
                      {{ getActivityLevel(row.cnt).label }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
              
              <!-- 分页器 -->
              <div class="pagination-wrapper">
                <el-pagination
                  v-model:current-page="currentPage"
                  v-model:page-size="pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="userVisitCounts.length"
                  layout="total, sizes, prev, pager, next, jumper"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 图表可视化 -->
        <div class="chart-visualization-card">
          <div class="chart-header">
            <div class="chart-title-section">
              <el-icon><TrendCharts /></el-icon>
              <span class="chart-title">访问数据可视化</span>
            </div>
            <div class="chart-controls">
              <el-segmented v-model="chartType" :options="chartOptions" @change="handleChartTypeChange" />
            </div>
          </div>
          
          <div class="chart-container">
            <div id="visit-chart" class="chart-content"></div>
          </div>
          
          <!-- 数据洞察 -->
          <div class="chart-insights">
            <div class="insight-card">
              <div class="insight-icon highest">
                <el-icon><Top /></el-icon>
              </div>
              <div class="insight-content">
                <div class="insight-value">{{ maxVisits }}</div>
                <div class="insight-label">最高访问次数</div>
              </div>
            </div>
            <div class="insight-card">
              <div class="insight-icon average">
                <el-icon><DataBoard /></el-icon>
              </div>
              <div class="insight-content">
                <div class="insight-value">{{ averageVisits }}</div>
                <div class="insight-label">平均访问次数</div>
              </div>
            </div>
            <div class="insight-card">
              <div class="insight-icon active">
                <el-icon><User /></el-icon>
              </div>
              <div class="insight-content">
                <div class="insight-value">{{ Math.round((activeUsers / userVisitCounts.length) * 100) }}%</div>
                <div class="insight-label">活跃用户占比</div>
              </div>
            </div>
            <div class="insight-card">
              <div class="insight-icon trend">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="insight-content">
                <div class="insight-value">{{ getTrendDirection() }}</div>
                <div class="insight-label">访问趋势</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed, nextTick, watch } from 'vue'
import axios from 'axios'
import * as echarts from 'echarts'
import {
  Document, Location, Setting, User, List, Operation, Position, TrendCharts, Management, Notebook, SetUp, Bell,
  SwitchButton, DataBoard, Top, DataAnalysis, Calendar
} from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage } from "element-plus";

export default {
  name: 'Main',
  setup() {
    const stats = ref([
      { title: '用户总数', value: '加载中...', info: '较昨日', trend: '+2.3%', trendColor: '#f5222d' },
      { title: '景点数量', value: '加载中...', info: '较上周', trend: '+5.6%', trendColor: '#52c41a' },
      {
        title: '评论总数',
        value: '加载中...',
        info: '今日新增',
        trend: '128',
        trendColor: '#333',
        commentDetails: { scenicCount: 0, strategyCount: 0 }
      },
      { title: '攻略数量', value: '加载中...', info: '本周新增', trend: '42', trendColor: '#333' },
    ]);

    const activities = ref([
      { icon: Bell, content: '系统升级维护通知' },
      { icon: User, content: '新增用户注册42人' },
      { icon: Document, content: '新增评论128条' },
      { icon: Position, content: '新增景点2个' }
    ]);

    // 公告栏滚动控制
    const pauseNotice = ref(false);
    const noticeTrack = ref(null);
    const noticeListStyle = ref({
      animationDuration: '20s',
    });

    // 横向滚动动画动态计算宽度
    onMounted(() => {
      nextTick(() => {
        updateNoticeAnimation();
      });
    });

    const loopedActivities = computed(() => {
  // 除去第一个内容后循环两遍
  const arr = activities.value.slice(1);
  return arr.concat(arr);
});

const updateNoticeAnimation = () => {
  if (!noticeTrack.value || !noticeTrack.value.parentElement) return;
  const trackEl = noticeTrack.value;
  const parentWidth = trackEl.parentElement.offsetWidth;
  const trackWidth = trackEl.scrollWidth;
  const minDuration = 10;
  let duration = Math.max(trackWidth / 60, minDuration);
  noticeListStyle.value.animationDuration = `${duration}s`;
};

    // 监听活动内容变化
    // 若activities数量变化需重新计算动画时间
    watch(
      () => activities.value,
      () => nextTick(updateNoticeAnimation),
      { deep: true }
    );

    // 动画暂停
    watch(pauseNotice, val => {
      // nothing, just for reactivity
    });

    const showCommentTooltip = ref(false);

    const handleCommentMouseEnter = (stat) => {
      if (stat.title === '评论总数') {
        showCommentTooltip.value = true;
      }
    };
    const handleCommentMouseLeave = () => {
      showCommentTooltip.value = false;
    };

    const userVisitCounts = ref([]) // [{loginId, userName, cnt}]
    const loginId = localStorage.getItem('loginId') || 'guest'
    const chartType = ref('bar')
    const chartOptions = [
      { label: '柱状图', value: 'bar' },
      { label: '饼图', value: 'pie' },
      { label: '折线图', value: 'line' }
    ]
    let chartInstance = null;

    // 分页相关
    const currentPage = ref(1)
    const pageSize = ref(10)

    const totalVisitCount = computed(() => userVisitCounts.value.reduce((sum, item) => sum + item.cnt, 0));
    const currentUserCount = computed(() => {
      const currentUser = userVisitCounts.value.find(item => item.loginId === loginId)
      return currentUser ? currentUser.cnt : 0
    })
    const averageVisits = computed(() => userVisitCounts.value.length === 0 ? 0 : Math.round(totalVisitCount.value / userVisitCounts.value.length));
    const maxVisits = computed(() => userVisitCounts.value.length === 0 ? 0 : Math.max(...userVisitCounts.value.map(item => item.cnt)));
    const activeUsers = computed(() => userVisitCounts.value.filter(item => item.cnt > 5).length);

    // 排序并添加排名的用户数据
    const sortedUserData = computed(() => {
      return [...userVisitCounts.value]
        .sort((a, b) => b.cnt - a.cnt)
        .map((item, index) => ({ ...item, rank: index + 1 }))
    })

    // 分页后的数据
    const paginatedUserData = computed(() => {
      const start = (currentPage.value - 1) * pageSize.value
      const end = start + pageSize.value
      return sortedUserData.value.slice(start, end)
    })

    const loadAllUserVisits = async () => {
      try {
        const res = await axios.get('http://localhost:8080/api/visit/users')
        // 后端返回 [{loginId, userName, cnt}]
        userVisitCounts.value = res.data
        const totalVisit = userVisitCounts.value.reduce((sum, item) => sum + item.cnt, 0)
        updateCountWithAnimation(4, totalVisit)
        initChart()
      } catch (e) {
        console.error('获取访问统计失败', e)
        ElMessage.error('获取访问统计失败')
      }
    }

    const updateCountWithAnimation = (index, finalCount) => {
      let currentCount = 0;
      const duration = 1000;
      const increment = finalCount / (duration / 50);
      const interval = setInterval(() => {
        if (currentCount < finalCount) {
          currentCount += increment;
          if (stats.value[index]) {
            stats.value[index].value = Math.floor(currentCount).toLocaleString();
          }
        } else {
          if (stats.value[index]) {
            stats.value[index].value = finalCount.toLocaleString();
          }
          clearInterval(interval);
        }
      }, 50);
    };

    const initChart = () => {
      const chartDom = document.getElementById('visit-chart');
      if (!chartDom) return;
      chartInstance = echarts.init(chartDom);
      renderChart();
    }

    const renderChart = () => {
      if (!chartInstance || userVisitCounts.value.length === 0) return;
      const sortedData = [...userVisitCounts.value].sort((a, b) => b.cnt - a.cnt);

      let option = {};
      switch (chartType.value) {
        case 'bar':
          option = {
            title: {
              text: '用户访问次数统计',
              left: 'center',
              textStyle: { fontSize: 16, fontWeight: 'bold', color: '#303133' }
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: { type: 'shadow' },
              backgroundColor: 'rgba(255, 255, 255, 0.95)',
              borderColor: '#e4e7ed',
              borderRadius: 8,
              textStyle: { color: '#606266' },
              formatter: (params) => {
                const data = params[0];
                let user = userVisitCounts.value.find(
                  u => `${u.userName || u.loginId}` === data.name || u.loginId === data.name
                );
                if (!user) user = { loginId: data.name, userName: '' };
                return `<div style="padding: 8px;">
                  <div style="font-weight: bold; margin-bottom: 4px;">用户信息</div>
                  <div>登录ID: ${user.loginId}</div>
                  ${user.userName ? `<div>用户名: ${user.userName}</div>` : ''}
                  <div style="color: #409EFF; font-weight: bold;">访问次数: ${data.value}</div>
                </div>`;
              }
            },
            grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
            xAxis: {
              type: 'category',
              data: sortedData.map(item => item.userName || item.loginId),
              axisLabel: { 
                rotate: 45, 
                interval: 0,
                color: '#606266',
                fontSize: 12
              },
              axisLine: { lineStyle: { color: '#e4e7ed' } }
            },
            yAxis: { 
              type: 'value', 
              name: '访问次数',
              nameTextStyle: { color: '#909399' },
              axisLabel: { color: '#606266' },
              axisLine: { lineStyle: { color: '#e4e7ed' } },
              splitLine: { lineStyle: { color: '#f5f7fa' } }
            },
            series: [{
              name: '访问次数',
              type: 'bar',
              data: sortedData.map(item => item.cnt),
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#409EFF' },
                  { offset: 1, color: '#67C23A' }
                ]),
                borderRadius: [4, 4, 0, 0]
              },
              emphasis: { 
                itemStyle: { 
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#66b1ff' },
                    { offset: 1, color: '#85ce61' }
                  ])
                } 
              },
              animationDelay: (idx) => idx * 100
            }]
          };
          break;
        case 'pie':
          option = {
            title: {
              text: '用户访问分布',
              left: 'center',
              textStyle: { fontSize: 16, fontWeight: 'bold', color: '#303133' }
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              top: 'middle',
              data: sortedData.slice(0, 10).map(item => item.userName || item.loginId),
              textStyle: { color: '#606266' }
            },
            tooltip: {
              trigger: 'item',
              backgroundColor: 'rgba(255, 255, 255, 0.95)',
              borderColor: '#e4e7ed',
              borderRadius: 8,
              textStyle: { color: '#606266' },
              formatter: (param) => {
                let user = userVisitCounts.value.find(
                  u => (u.userName || u.loginId) === param.name || u.loginId === param.name
                );
                if (!user) user = { loginId: param.name, userName: '' };
                return `<div style="padding: 8px;">
                  <div style="font-weight: bold; margin-bottom: 4px;">用户信息</div>
                  <div>登录ID: ${user.loginId}</div>
                  ${user.userName ? `<div>用户名: ${user.userName}</div>` : ''}
                  <div style="color: #409EFF; font-weight: bold;">访问次数: ${param.value} (${param.percent}%)</div>
                </div>`;
              }
            },
            series: [{
              name: '访问次数',
              type: 'pie',
              radius: ['30%', '60%'],
              center: ['60%', '50%'],
              avoidLabelOverlap: false,
              data: sortedData.slice(0, 10).map((item, index) => ({
                value: item.cnt,
                name: item.userName || item.loginId,
                itemStyle: {
                  color: [
                    '#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399',
                    '#66b1ff', '#85ce61', '#f0a020', '#ff7875', '#b3b3b3'
                  ][index]
                }
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              animationType: 'scale',
              animationEasing: 'elasticOut'
            }]
          };
          break;
        case 'line':
          option = {
            title: {
              text: '用户访问趋势',
              left: 'center',
              textStyle: { fontSize: 16, fontWeight: 'bold', color: '#303133' }
            },
            tooltip: {
              trigger: 'axis',
              backgroundColor: 'rgba(255, 255, 255, 0.95)',
              borderColor: '#e4e7ed',
              borderRadius: 8,
              textStyle: { color: '#606266' },
              formatter: (params) => {
                const data = params[0];
                let user = userVisitCounts.value.find(
                  u => (u.userName || u.loginId) === data.name || u.loginId === data.name
                );
                if (!user) user = { loginId: data.name, userName: '' };
                return `<div style="padding: 8px;">
                  <div style="font-weight: bold; margin-bottom: 4px;">用户信息</div>
                  <div>登录ID: ${user.loginId}</div>
                  ${user.userName ? `<div>用户名: ${user.userName}</div>` : ''}
                  <div style="color: #409EFF; font-weight: bold;">访问次数: ${data.value}</div>
                </div>`;
              }
            },
            grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
            xAxis: {
              type: 'category',
              data: sortedData.map(item => item.userName || item.loginId),
              axisLabel: { 
                rotate: 45, 
                interval: 0,
                color: '#606266',
                fontSize: 12
              },
              axisLine: { lineStyle: { color: '#e4e7ed' } }
            },
            yAxis: { 
              type: 'value', 
              name: '访问次数',
              nameTextStyle: { color: '#909399' },
              axisLabel: { color: '#606266' },
              axisLine: { lineStyle: { color: '#e4e7ed' } },
              splitLine: { lineStyle: { color: '#f5f7fa' } }
            },
            series: [{
              name: '访问次数',
              type: 'line',
              data: sortedData.map(item => item.cnt),
              smooth: true,
              itemStyle: { color: '#409EFF' },
              lineStyle: { width: 3, color: '#409EFF' },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                  { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
                ])
              },
              symbol: 'circle',
              symbolSize: 6,
              animationDelay: (idx) => idx * 50
            }]
          };
          break;
      }
      chartInstance.setOption(option, true);
    }

    const handleChartTypeChange = (type) => {
      chartType.value = type;
      renderChart();
    }

    // 表格相关方法
    const getRowClassName = ({ row, rowIndex }) => {
      if (row.rank <= 3) return 'top-user-row'
      if (row.cnt > averageVisits.value) return 'above-average-row'
      return ''
    }

    const getRankClass = (rank) => {
      if (rank === 1) return 'rank-gold'
      if (rank === 2) return 'rank-silver'  
      if (rank === 3) return 'rank-bronze'
      return 'rank-normal'
    }

    const getVisitPercentage = (count) => {
      return Math.min((count / maxVisits.value) * 100, 100)
    }

    const getActivityLevel = (count) => {
      if (count >= 20) return { type: 'danger', label: '极活跃' }
      if (count >= 10) return { type: 'warning', label: '很活跃' }
      if (count >= 5) return { type: 'success', label: '活跃' }
      return { type: 'info', label: '一般' }
    }

    const handleRowClick = (row) => {
      ElMessage.info(`用户 ${row.loginId} 访问了 ${row.cnt} 次`)
    }

    const handleSizeChange = (val) => {
      pageSize.value = val
      currentPage.value = 1
    }

    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const getTrendDirection = () => {
      if (userVisitCounts.value.length === 0) return '暂无'
      const avg = averageVisits.value
      const recentUsers = sortedUserData.value.slice(0, Math.ceil(userVisitCounts.value.length * 0.3))
      const recentAvg = recentUsers.reduce((sum, user) => sum + user.cnt, 0) / recentUsers.value
      return recentAvg > avg ? '上升' : '平稳'
    }

    onMounted(async () => {
      try {
        const scenicResponse = await axios.get('http://localhost:8080/mw/ScenicSpotCount')
        const scenicCount = scenicResponse.data;
        updateCountWithAnimation(1, scenicCount);
      } catch (error) {
        console.error('获取景点数量失败:', error);
        stats.value[1].value = '加载失败';
      }
      try {
        const userResponse = await axios.get('http://localhost:8080/mw/UserCount')
        const userCount = userResponse.data;
        updateCountWithAnimation(0, userCount);
      } catch (error) {
        console.error('获取用户总数失败:', error);
        stats.value[0].value = '加载失败';
      }
      try {
        const strategyResponse = await axios.get('http://localhost:8080/ts/count')
        const strategyCount = strategyResponse.data;
        updateCountWithAnimation(3, strategyCount);
      } catch (error) {
        console.error('获取攻略数量失败:', error);
        stats.value[3].value = '加载失败';
      }
      try {
        const commentResponse = await axios.get('http://localhost:8080/tc/total')
        const commentCount = commentResponse.data;
        stats.value[2].value = commentCount.toLocaleString();
        updateCountWithAnimation(2, commentCount);
        try {
          const scenicCommentResponse = await axios.get('http://localhost:8080/sc/total')
          stats.value[2].commentDetails.scenicCount = scenicCommentResponse.data;
          const strategyCommentResponse = await axios.get('http://localhost:8080/sct/total')
          stats.value[2].commentDetails.strategyCount = strategyCommentResponse.data;
        } catch (error) {
          console.error('获取评论分类数量失败:', error);
        }
      } catch (error) {
        console.error('获取评论总数失败:', error);
        stats.value[2].value = '加载失败';
      }
      await loadAllUserVisits()
      nextTick(updateNoticeAnimation);
    });

    return {
        activities,
  loopedActivities,
      stats,
      activities,
      pauseNotice,
      showCommentTooltip,
      handleCommentMouseEnter,
      handleCommentMouseLeave,
      userVisitCounts,
      chartType,
      chartOptions,
      totalVisitCount,
      currentUserCount,
      averageVisits,
      maxVisits,
      activeUsers,
      currentPage,
      pageSize,
      paginatedUserData,
      handleChartTypeChange,
      getRowClassName,
      getRankClass,
      getVisitPercentage,
      getActivityLevel,
      handleRowClick,
      handleSizeChange,
      handleCurrentChange,
      getTrendDirection,
      noticeTrack,
      noticeListStyle
    }
  },
  components: {
    DataBoard,
    Top,
    TrendCharts,
    DataAnalysis,
    Calendar,
    List,
    User,
    Document,
    Position,
    Bell
  }
}
</script>
<style scoped src="/public/css/MainLayout.css"></style>
<style scoped>
/* 公告栏横向滚动样式 */
.fixed-item {
  margin-right: 24px;
  font-weight: bold;
  color: #c96a00;
  background: rgba(255,248,225,0.6);
  border-radius: 6px;
  padding: 0 12px;
}

.notice-bar-wrapper {
  width: 100%;
  background: linear-gradient(90deg, #f6d365 0%, #fda085 100%);
  padding: 0;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(255, 183, 77, 0.1);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  min-height: 40px;
}

.notice-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  overflow: hidden;
}

.notice-icon {
  color: #faad14;
  margin-right: 8px;
  font-size: 22px;
  flex-shrink: 0;
}

.notice-content {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 40px;
  line-height: 40px;
  min-width: 0;
}

.notice-list-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  animation: notice-scroll-x linear infinite;
  animation-play-state: running;
  will-change: transform;
}

.notice-list-horizontal.paused {
  animation-play-state: paused;
}

.notice-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #884d00;
  height: 40px;
  white-space: nowrap;
  font-weight: 500;
  padding-right: 30px;
}

.notice-item-icon {
  font-size: 18px;
  color: #ff9800;
}

@keyframes notice-scroll-x {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .notice-bar {
    font-size: 13px;
    padding: 0 8px;
    height: 38px;
  }
  .notice-content, .notice-item {
    height: 38px;
    line-height: 38px;
    font-size: 13px;
  }
}

/* 新增：并排布局 */
.dashboard-grid2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 新增：总览和明细横向并排 */
.overview-table-row {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.stats-overview-card {
  min-width: 350px; /* 保证总览区域不会过窄 */
  flex: 1 1 350px;
  max-width: 480px;
}
.stats-table-card {
  flex: 2 1 520px;
  min-width: 320px;
  max-width: 900px;
}

/* 访问统计板块样式 */
.visit-stats-section {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px;
}

/* 总览卡片 */
.stats-overview-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 24px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
}

.overview-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  backdrop-filter: blur(10px);
}

.header-content h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.header-content p {
  margin: 4px 0 0 0;
  font-size: 14px;
  opacity: 0.8;
}

.overview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.metric-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(1.02);
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
}

.metric-icon.total-visits { background: rgba(24, 144, 255, 0.8); }
.metric-icon.total-users { background: rgba(82, 196, 26, 0.8); }
.metric-icon.avg-visits { background: rgba(245, 108, 108, 0.8); }
.metric-icon.active-users { background: rgba(250, 173, 20, 0.8); }

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.metric-label {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 2px;
}

/* 表格卡片 */
.stats-table-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.stats-table-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #e9ecef;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
}

.table-wrapper {
  padding: 0;
}

/* 表格行样式 */
:deep(.top-user-row) {
  background: linear-gradient(90deg, #fff7e6, #ffffff) !important;
}

:deep(.above-average-row) {
  background: linear-gradient(90deg, #f6ffed, #ffffff) !important;
}

:deep(.el-table__row:hover) {
  background: #f5f7fa !important;
}

/* 排名徽章 */
.rank-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.rank-gold { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #8b6914; }
.rank-silver { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); color: #595959; }
.rank-bronze { background: linear-gradient(135deg, #cd7f32, #daa556); color: #5d4020; }
.rank-normal { background: #909399; }

/* 用户信息 */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  background: linear-gradient(135deg, #409eff, #67c23a);
  color: white;
  font-weight: bold;
}

.login-id {
  font-weight: 500;
  color: #303133;
}

.user-name {
  color: #606266;
}

/* 访问计数器 */
.visit-count {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.visit-progress {
  width: 60px;
}

.count-number {
  font-weight: bold;
  color: #409eff;
  font-size: 14px;
}

/* 活跃度标签 */
.activity-tag {
  font-weight: 500;
}

/* 分页器 */
.pagination-wrapper {
  padding: 20px;
  display: flex;
  justify-content: center;
  background: #fafafa;
}

/* 图表可视化卡片 */
.chart-visualization-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.chart-visualization-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(90deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #e9ecef;
}

.chart-title-section {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
}

.chart-container {
  padding: 20px;
}

.chart-content {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

/* 数据洞察 */
.chart-insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding: 20px 24px;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

.insight-card {
  display: flex;
  align-items: center;
  background: white;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.insight-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
}

.insight-icon.highest { background: linear-gradient(135deg, #ff6b6b, #ee5a52); }
.insight-icon.average { background: linear-gradient(135deg, #4ecdc4, #44a08d); }
.insight-icon.active { background: linear-gradient(135deg, #45b7d1, #096dd9); }
.insight-icon.trend { background: linear-gradient(135deg, #f093fb, #f5576c); }

.insight-content {
  flex: 1;
}

.insight-value {
  font-size: 18px;
  font-weight: 700;
  color: #303133;
  line-height: 1;
}

.insight-label {
  font-size: 12px;
  color: #909399;
  margin-top: 2px;
}

/* 评论提示框 */
.comment-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-75%);
  width: 200px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  padding: 12px;
  z-index: 1000;
  margin-top: 8px;
}

.comment-tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 75%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #e4e7ed;
}

.comment-tooltip::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 75%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid white;
}

.tooltip-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #303133;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 4px;
}

.tooltip-content {
  font-size: 12px;
  color: #606266;
}

.tooltip-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  padding: 2px 0;
}

.tooltip-item:last-child {
  margin-bottom: 0;
  font-weight: 600;
  color: #303133;
  border-top: 1px solid #f0f0f0;
  padding-top: 6px;
  margin-top: 4px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .visit-stats-section {
    padding: 16px;
  }
  
  .overview-metrics {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .chart-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .overview-metrics {
    grid-template-columns: 1fr;
  }
  
  .chart-insights {
    grid-template-columns: 1fr;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .stats-overview-card {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .visit-stats-section {
    padding: 12px;
  }
  
  .metric-item {
    padding: 12px;
  }
  
  .chart-content {
    height: 300px;
  }
  
  .insight-card {
    padding: 12px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stats-overview-card,
.stats-table-card,
.chart-visualization-card {
  animation: fadeInUp 0.6s ease forwards;
}

.stats-table-card {
  animation-delay: 0.2s;
}

.chart-visualization-card {
  animation-delay: 0.4s;
}

/* Element Plus 组件自定义样式 */
:deep(.el-segmented) {
  background: #f5f7fa;
  border-radius: 8px;
}

:deep(.el-segmented__item-selected) {
  background: #409eff;
  color: white;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
}

:deep(.el-table) {
  border-radius: 0;
}

:deep(.el-table th) {
  background: #fafafa;
  color: #606266;
  font-weight: 600;
}

:deep(.el-pagination) {
  justify-content: center;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  border-radius: 6px;
}

:deep(.el-pager li) {
  border-radius: 6px;
  margin: 0 2px;
}
</style>